<template>
  <div>
    <el-card style="width:100%">
      <p>数据推送</p>
      <div class="right margin-bottom">
        <!-- 操作 -->
        <div class="searchArea flex">
          <el-form
          ref="serachForm"
          :model="searchForm"
          :inline="true"
          style="width:98%"
          label-position="left"
          label-width="90px"
        >
          <el-form-item label="供应商">
            <el-select v-model="searchForm.menuName" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in searchForm.AllSlist"
                :key="item.id"
                :label="item.menuName"
                :value="item.menuName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary"
                  @click="searchPush">搜索</el-button>
          <el-button type="primary"
                  @click="addPush">新增</el-button>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <!-- 表格 -->
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe>
          <el-table-column prop="id"
                           label="序号"
                           align="center"
                           width="60"></el-table-column>
          <el-table-column prop="operatorName"
                           label="供应商"
                           align="center"
                           width="160"></el-table-column>
          <el-table-column prop="email"
                           label="收件邮箱"
                           align="center"
                           width="160"></el-table-column>
          <el-table-column label="推送内容"
                           align="center"
                           width="120">
            <template slot-scope="scope">
              <span>{{scope.row.contentType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cron"
                           label="发送时间"
                           align="center"></el-table-column>
          <el-table-column label="状态"
                           align="center"
                           width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.activeFlag==1?'success':'danger'">{{scope.row.activeFlag==1?"开启":"关闭"}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           fixed="right"
                           width="300">
            <template slot-scope="scope">
              <el-row>
                <el-button-group>
                  <el-button type="primary"
                            size="mini"
                            @click="openPush(scope.row.id)">开启</el-button>
                  <el-button type="primary"
                            size="mini"
                            @click="closePush(scope.row.id)">关闭</el-button>
                  <el-button type="primary"
                            size="mini"
                            @click="editPush(scope.$index)">修改</el-button>
                  <el-button type="primary"
                            size="mini"
                            @click="deletePush(scope.row.id)">删除</el-button>
                </el-button-group>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
    <!--新增推送-->
    <div v-show="showAdd">
      <div class="alerts"
           style="top: 10%;">
        <div class="alertDiv"
             style="width:30%;">
          <div style="text-align: center;line-height: 50px;">
            <strong class="title">新增推送内容</strong>
          </div>
          <div class="alertDd"
               style="width: 85%;margin: 10px auto;">
            <el-form ref="newPushForm"
                     :model="newPushForm"
                     label-width="110px"
                     label-positon="left"
                     :rules="rules">
              <el-form-item prop="items" label="供应商:">
                <el-select v-model="menuNameValue" placeholder="请选择" @change="changeMenu">
                  <el-option
                    v-for="item in newPushForm.AllSlist"
                    :label="item.menuName"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="Email"
                            label="输入收件邮箱:">
                <!--<v-distpicker @selected="twSelected" style="display: inline-block;"></v-distpicker>-->
                  <el-input v-model="newPushForm.Email" disabled></el-input>
              </el-form-item>
              <el-form-item prop="contentType"
                            label="选择推送内容:">
                <el-select v-model="newPushForm.contentType"
                           placeholder="请选择">
                  <el-option v-for="item in options1"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="sendType"
                            label="选择推送类型:">
                <el-radio v-model="newPushForm.sendType"
                          label="1">每日</el-radio>
                <el-radio v-model="newPushForm.sendType"
                          label="2">每月</el-radio>
              </el-form-item>
              <el-form-item prop="sendTimeStr.day"
                            label="选择每月日期:"
                            v-if="this.newPushForm.sendType==2">
                <el-select v-model="newPushForm.sendTimeStr.day"
                           placeholder="请选择">
                  <el-option v-for="item in options2"
                             :key="item.value"
                             :label="item.name"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="sendTimeStr.time"
                            label="选择推送时间:">
                <el-time-select v-model="newPushForm.sendTimeStr.time"
                                :picker-options="{
                        start: '09:00',
                        step: '00:15',
                        end: '18:00'
                    }"
                                placeholder="选择时间">
                </el-time-select>
              </el-form-item>
              <el-form-item prop="activeFlag"
                            label="选择推送状态:">
                <el-switch v-model="newPushForm.activeFlag"
                           active-color="#409EFF"
                           inactive-color="#ff4949"
                           active-text="开启"
                           inactive-text="关闭">
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div class="buttomF">
            <el-button type="primary"
                       class="textcolor"
                       @click="addSubmit">确定</el-button>
            <el-button type="primary"
                       class="textcolor"
                       @click.native="addCancel">取消</el-button>
          </div>
        </div>
      </div>
      <div class="alertBg"></div>
    </div>
    <!--修改推送-->
    <div v-show="showEdit">
      <div class="alerts"
           style="top: 10%;">
        <div class="alertDiv"
             style="width:30%;">
          <div style="text-align: center;line-height: 50px;">
            <strong class="title">修改推送内容</strong>
          </div>
          <div class="alertDd"
               style="width: 85%;margin: 10px auto;">
            <el-form ref="editPushForm"
                     :model="editPushForm"
                     label-width="110px"
                     label-positon="left"
                     :rules="rules">
              <el-form-item prop="Email"
                            label="输入收件邮箱:">
                <div style="width:217px; display: inline-block;">
                  <el-input v-model="editPushForm.Email"
                            placeholder="输入邮箱地址"></el-input>
                </div>
              </el-form-item>
              <el-form-item prop="contentType"
                            label="选择推送内容:">
                <el-select v-model="editPushForm.contentType"
                           placeholder="请选择">
                  <el-option v-for="item in options1"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="sendType"
                            label="选择推送类型:">
                <el-radio v-model="editPushForm.sendType"
                          label="1">每日</el-radio>
                <el-radio v-model="editPushForm.sendType"
                          label="2">每月</el-radio>
              </el-form-item>
              <el-form-item prop="sendTimeStr.day"
                            label="选择每月日期:"
                            v-if="this.editPushForm.sendType==2">
                <el-select v-model="editPushForm.sendTimeStr.day"
                           placeholder="请选择">
                  <el-option v-for="item in options2"
                             :key="item.value"
                             :label="item.name"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="sendTimeStr.time"
                            label="选择推送时间:">
                <el-time-select v-model="editPushForm.sendTimeStr.time"
                                :picker-options="{
                        start: '09:00',
                        step: '00:15',
                        end: '18:00'
                    }"
                                placeholder="选择时间">
                </el-time-select>
              </el-form-item>
              <el-form-item prop="activeFlag"
                            label="选择推送状态:">
                <el-switch v-model="editPushForm.activeFlag"
                           active-color="#409EFF"
                           inactive-color="#ff4949"
                           active-text="开启"
                           inactive-text="关闭">
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div class="buttomF">
            <el-button type="primary"
                       class="textcolor"
                       @click="editSubmit">确定</el-button>
            <el-button type="primary"
                       class="textcolor"
                       @click.native="editCancel">取消</el-button>
          </div>
        </div>
      </div>
      <div class="alertBg"></div>
    </div>
  </div>
</template>

<script>
const daylist = []
for (let i = 1; i <= 31; i++) {
  daylist[i - 1] = {
    value: i < 10 ? `0${i}` : i,
    name: `${i}日`
  }
}
import { Message } from "element-ui";
import { ADDPUSH, PUSHLIST, DELETEPUSH, CLOSEPUSH, SUPPLIER_ALLLIST,
  ACTIVEPUSH, UPDATEPUSH } from "@/utils/api"
export default {
  data () {
    return {
      menuNameValue:null,
      searchMenu:'',
      searchForm:{menuName:'',AllSlist:[]},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      showEdit: false,
      tableData: [],
      showAdd: false,
      newPushForm: {
        Email: "",
        contentType: "",
        sendType: "",
        sendTimeStr: {
          day: "",
          time: "",
        },
        activeFlag: "",
        AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ]
      },
      editPushForm: {
        id: "",
        Email: "",
        contentType: "",
        sendType: "",
        sendTimeStr: {
          day: "",
          time: "",
        },
        activeFlag: "",
      },
      rules: {
        Email: [
          { type: "email", required: true, message: '请输入正确的邮箱名称', trigger: 'blur' }
        ],
        contentType: [
          { required: true, message: '请选择推送内容', trigger: 'change' }
        ],
        sendType: [
          { required: true, message: '请选择推送类型', trigger: 'change' }
        ],
      },
      options1: [
      //   {
      //   value: '1',
      //   label: '客服聊天'
      // },
       {
        value: '2',
        label: '商城订单'
      }, {
        value: '3',
        label: '样品订单'
      }],
      options2: daylist
    }
  },
  mounted () {
    this.getlist()
    console.log(this.tableData)
    console.log(this.$refs, "$refs")
    this.getAllList()
  },
  methods: {
    searchPush(){
      this.getlist()
    },
    changeMenu(row){
      console.log('===>' + row)
      var se;
      for(se of this.newPushForm.AllSlist){
         if(se.id==this.menuNameValue){
           console.log('=se==>' + se.id)
            this.newPushForm.Email=se.companyEmail
         }
      }
    },
    getAllList() {
      SUPPLIER_ALLLIST({}).then(res => {
        this.newPushForm.AllSlist = res.data;
        this.searchForm.AllSlist=res.data
        console.log(this.AllSlist);
      });
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getlist();
    },
    handleSizeChange (val) {
      this.pageSize = val,
        this.getlist();
    },
    addPush () {
      this.showAdd = !this.showAdd
    },
    addCancel () {
      Message({ message: "已取消，数据未保存", type: "error", duration: 2000 }).then(
        this.showAdd = !this.showAdd
      )
    },
    editCancel () {
      Message({ message: "已取消，数据未保存", type: "error", duration: 2000 }).then(
        this.showEdit = !this.showEdit
      )
    },
    handleChange (value) {
      console.log(value)
    },
    openPush (value) {
      ACTIVEPUSH({
        id: value
      }).then(res => {
        if (res.status == 200) {
          Message({ message: "当前推送已开启", type: "success", duration: 2000 })
          this.getlist()
        }
      })
    },
    closePush (value) {
      CLOSEPUSH({
        id: value
      }).then(res => {
        if (res.status == 200) {
          console.log(res, "close")
          Message({ message: "当前推送已关闭", type: "error", duration: 2000 })
          this.getlist()
        }
      })
    },
    deletePush (value) {
      DELETEPUSH({
        id: value
      }).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.getlist()
          Message({ message: `${value}号已删除`, type: "warning", duration: 2000 })
        }
      })
    },
    getlist () {
      PUSHLIST({
        menuName:this.searchForm.menuName,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        if (res.status == 200) {
          this.total = res.data.count
          this.tableData = res.data.dataList
          for (let i in this.tableData) {
            // this.tableData[i].contentType = this.tableData[i].contentType == 1 ? "客服聊天" :
              this.tableData[i].contentType == 2 ? "商城订单" :
                this.tableData[i].contentType == 3 ? "样品订单" : ""
            this.tableData[i].day = this.tableData[i].cron.split(" ")[3] == "*" ? "每日" : `每月${this.tableData[i].cron.split(" ")[3]}日`
            this.tableData[i].h = this.tableData[i].cron.split(" ")[2]
            this.tableData[i].m = this.tableData[i].cron.split(" ")[1]
            this.tableData[i].cron = `${this.tableData[i].day}--${this.tableData[i].h}:${this.tableData[i].m}`
          }
          console.log(this.tableData)
        }
      })
    },
    addSubmit () {
      var sendTimeStr1 = ""
      var time2 = this.newPushForm.sendTimeStr.time.split(':')
      var h = time2[0]
      var m = time2[1]
      if (this.newPushForm.sendType == 1) {
        sendTimeStr1 = `00 ${m} ${h} *`
      } else {
        sendTimeStr1 = `00 ${m} ${h} ${this.newPushForm.sendTimeStr.day}`
      }
      ADDPUSH({
        menuId:this.menuNameValue,
        Email: this.newPushForm.Email,
        contentType: this.newPushForm.contentType,
        sendType: this.newPushForm.sendType,
        activeFlag: this.newPushForm.status === false ? "0" : "1",
        sendTimeStr: sendTimeStr1
      }).then(res => {
        if (res.status == 200) {
          this.$refs.newPushForm.resetFields()
          this.$message.success('数据保存成功')
          this.showAdd = !this.showAdd
          this.getlist()
        }
      });
    },
    editPush (i) {
      this.showEdit = true;
      this.editPushForm.id = this.tableData[i].id
      this.editPushForm.Email = this.tableData[i].email
      // this.editPushForm.contentType = this.tableData[i].contentType == "客服聊天" ? "1" :
        this.tableData[i].contentType == "商城订单" ? "2" :
          this.tableData[i].contentType == "样品订单" ? "3" :
            this.editPushForm.sendType = `${this.tableData[i].sendType}`
      this.editPushForm.sendTimeStr.time = this.tableData[i].h + ":" + this.tableData[i].m
      this.editPushForm.activeFlag = this.tableData[i].activeFlag == "0" ? false : true
    },
    editSubmit () {
      var sendTimeStr2 = ""
      var time3 = this.editPushForm.sendTimeStr.time.split(':')
      var h = time3[0]
      var m = time3[1]
      if (this.editPushForm.sendType == 1) {
        sendTimeStr2 = `00 ${m} ${h} *`
      } else {
        sendTimeStr2 = `00 ${m} ${h} ${this.editPushForm.sendTimeStr.day}`
      }
      UPDATEPUSH({
        id: this.editPushForm.id,
        Email: this.editPushForm.Email,
        contentType: this.editPushForm.contentType,
        sendType: this.editPushForm.sendType,
        activeFlag: this.editPushForm.activeFlag === false ? "0" : "1",
        sendTimeStr: sendTimeStr2
      }).then(res => {
        if (res.status == 200) {
          this.$refs.editPushForm.resetFields()
          this.$message.success('数据修改成功')
          this.showEdit = !this.showEdit
          this.getlist()
        }
      });
    }
  },
}
</script>


<style scoped>
.searchArea {
  width: 100%;
  margin-top: 15px;
  justify-content: flex-start;
}
.alerts {
  z-index: 2001;
  position: fixed;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.alertDiv {
  display: inline-block;
  width: 900px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 16px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.alertDd {
  width: 80%;
  margin: 6% auto;
  color: #606266;
}
.buttomF {
  margin-right: 31%;
  margin-top: 1%;
  padding-bottom: 2%;
  float: right;
}
.alertBg {
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
}
</style>